<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name='viewport' content='width=device-width,initial-scale=1.0,user-scalable=no'>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<script src="js/flexible.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		html,
		body {
			width: 100%;
			height: 100%;
		}
		
		@keyframes rotate {
			from {
				-webkit-transform: rotate(0deg)
			}
			to {
				-webkit-transform: rotate(360deg)
			}
		}
		
		.rota {
			animation: 6.5s linear 0s normal none infinite rotate;
		}
		
		.fg-col {
			display: flex;
			flex-direction: column;
		}
	</style>

	<body class="fg-col" style="max-height: 100%;height: 100%; ">
		<div style="width: 100%;height: 1.33rem;background-color: white;flex-grow: 0;">
			<img style="height: 0.586rem;position: absolute;top: 0.373rem;left: 0.667rem;" src="img/标志.png" />
			<img onclick="window.location='rule.html'" style="height: 0.587rem;position: absolute;top: 0.373rem;right:1.867rem;" src="img/规则.png" />
			<img class="rota" onclick="playAudio(this)" style="height: 0.587rem;position: absolute;top: 0.373rem;right: 0.668rem;" src="img/音乐.png" />
			<audio preload="preload" id="car_audio" src="stw_audio_2.mp3" loop=""></audio>
		</div>
		<div style="display: flex;display: -webkit-flex;flex-direction: column;flex-grow: 1;background-image: url(./img/body_bg.png);background-size: 100% 100%;">
			<img src="img/随文.png" / style="color: white;width: 4rem;margin: 0 auto;margin-top: 0.8rem;">
			<img src="img/标题.png" / style="color: white;width: 6.0rem;margin: 0 auto;margin-top: 0.3rem;">

			<div class="wheel" style="margin-top: 0.5rem;">
				<canvas id="wheelCanvas" width="350px" height="350px"></canvas>
				<img class="pointer" draggable="false" src="img/wheel-pointer.png" />
			</div>
			<img src="img/阴影.png" / style="width: 5.333rem;margin: -0.3rem auto;">
			<img onclick="window.location='guajiang.html'" src="img/瓶盖.png" / style="width: 1.2rem;margin: -0.8rem ;margin-right: 0.667rem;align-self: flex-end;">
			<div style="width: 4.8rem;height: 1.067rem;font-size: 14px;color: #e86f15;background-color: #ffb400;margin: 0 auto;margin-top: 0;text-align: center;border-radius: 30px;line-height: 1.067rem;margin-top: 1.333rem;">
				今日剩余抽奖次数<span id="num" style="font-size: 18px;">3</span>次
			</div>
			<div onclick="window.location='myAward.html'" style="display: flex;align-items: center;width: 1.2rem;height: 1.2rem;margin-top: -1.067rem;margin-right: 0.667rem;background-color: #8a3636;border-radius: 100%;align-self: flex-end;">
				<img src="img/奖品图标.png" style="width: 0.8rem;margin: 0 auto;" />
			</div>

		</div>

		<div id="award" style="display: none;align-items: center;background-color: #666666;width: 100%;height: 100%;position: fixed;top: 0;left: 0;">
			<div style="width: 320px;position: absolute;left: 0;right: 0;margin-left: auto;margin-right: auto;">
				<img src="img/光效.png" / style="width: 320px;">
			</div>
			<div style="width: 300px;position: absolute;left: 0;right: 0;margin-left: auto;margin-right: auto;margin-top: -120px;">
				<img src="img/装饰.png" / style="width: 300px;">
			</div>
			<div style="position: relative;z-index:99;background-color: white;width: 210px;height: 250px;border-radius: 10px;margin: 0 auto;">
				<div style="margin: -23px auto;width: 150px;">
					<img src="img/中奖.png" style="width: 100%;height: auto;margin: 0 auto;" />
				</div>
				<div style="margin: 0 auto;margin-top: 20px;width: 80px;">
					<img id="jiangpinImg" src="img/代金券.png" style="width: 80px;height: auto;margin: 0 auto;" />
				</div>
				<div id="jiangpin" style="margin: 30px auto;margin-bottom: 0;width: 100%;text-align: center;font-weight: 700;font-size: 16px;">
					五折优惠券
				</div>
				<div id="closeAward" style="position: absolute;left: 0;right: 0;width: 20px;margin-left: auto;margin-right: auto;margin-top: 90px;" href="">
					<img src="img/取消.png" / style="width: 20px;height: 20px;">
				</div>
			</div>
		</div>

		<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jQueryRotate.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>

		<script src="js/token.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/weixin-utils.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">
			document.getElementById("closeAward").onclick = function() {
				document.getElementById("award").style.display = 'none'
			}
			var audio = $('#car_audio');
			var isPlaying = false;

			function playAudio(this_) {
				var audio = $('#car_audio');
				if(audio.attr('src') == undefined) {
					audio.attr('src', audio.data('src'));
				}
				if(!isPlaying){
					audio[0].play();
					this_.className = 'rota'
					isPlaying = true;
					
				}else{
					audio[0].pause();
					this_.className = ''
					isPlaying = false;
				}
				
			}
			$(function() {
				playAudio();
				document.addEventListener("WeixinJSBridgeReady", function() {
					WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
						network = e.err_msg.split(":")[1]; //结果在这里
						playAudio();
					});
				}, false);
			})
		</script>
	</body>

</html>